<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
   
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    @select="handleSelect"
  >
  <div >
    <el-menu-item index="0"><img  
      src="@/assets/wjy/hk.jpg" 
      alt="HKSD logo" 
      style="width: 50px;height: 50px;">
    </el-menu-item>
</div>
    <el-menu-item index="1" @click="router.push('/')">首页</el-menu-item>
    <el-sub-menu index="2" @click="router.push('/attraction')">
      <template #title>景点</template>
      <el-menu-item index="2-1">威海市</el-menu-item>
      <el-menu-item index="2-2">青岛市</el-menu-item>
      <el-menu-item index="2-3">泰安市</el-menu-item>
      <el-sub-menu index="2-4">
        <template #title>全部</template>
        <el-menu-item index="2-4-1">济南市</el-menu-item>
        <el-menu-item index="2-4-2">烟台市</el-menu-item>
        <el-menu-item index="2-4-3">济宁市</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <el-menu-item index="3" @click="router.push('/person')">个人信息</el-menu-item>
    <el-menu-item index="4" @click="router.push('/order')">查看订单</el-menu-item>
    <el-menu-item index="5" @click="dialogVisible = true" >登录</el-menu-item>
    <el-menu-item index="6" @click="loginOut()" v-if="LoginStore.loginToken">安全退出</el-menu-item>
     <el-menu-item index="7" v-if="LoginStore.loginToken">{{LoginStore.loginUsername}}</el-menu-item>
    <el-menu-item index="8" @click="connectKefu">联系客服</el-menu-item>
  </el-menu>
  <div class="h-6" />
  <el-dialog
    v-model="dialogVisible"
    title="用户登录入口"
    width="500"
    
  >
    <el-form   :model="form" label-width="auto" style="max-width: 600px"  ref="loginFromRef" >
        <el-form-item label="username" style="display: flex;">
         <el-input v-model="form.username"   style="flex: 5;" aria-required="true" placeholder="请输入用户名"/>
        </el-form-item>
        <el-form-item label="password" >
         <el-input v-model="form.pwd" type="password" placeholder="请输入密码"  show-password/>
        </el-form-item>
     </el-form>


    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
         <el-button type="primary" @click="login()">
          登录
        </el-button>
      </div>
    </template>
  </el-dialog>
  
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useLoginStore } from '@/stores/LoginStore'
import axios from '@/http/request'
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
import type { Action } from 'element-plus'



const router = useRouter()
const LoginStore = useLoginStore()
const dialogVisible = ref(false)
const activeIndex = ref('1')
const form = reactive({
  username: '',
  pwd: ''
})

// 登录函数
async function login() {
    try{
     let res = await axios.post(`/user/login/${form.username}/${form.pwd}`)
     console.log(res.data)
      
    if (res.data.location == 200) {
      ElNotification({
        title: 'Success',
        message: '登录成功',
        type: 'success',
      })
      console.log('登录响应', res.data)
      dialogVisible.value = false
      let token = res.data.data.token
      let username = res.data.data.username
      console.log(res.data.data)
      LoginStore.setLoginInfo(username, token)
    
      router.push('/')
      activeIndex.value = '1'
    } else {
      ElNotification({
        title: 'Error',
        message: res.data.msg,
        type: 'error',
      })
    } }catch (e: any) {
        ElNotification.error(e.response?.data?.msg || '网络错误');
}
  }


// 退出登录
function loginOut() {
  localStorage.clear()
  LoginStore.setLoginInfo('', '')
  activeIndex.value = '5'
  ElNotification({
    title: 'Info',
    message: '已退出登录',
    type: 'info',
  })
} 
let connectKefu=()=>{
  ElMessageBox.alert('400-123-4567','客服电话',{
    confirmButtonText:'OK',
    callback:(action:Action)=>{
      ElMessage({
        type:'info',
        message: `action:${action}`,
      })
    },
  })

}


const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
  activeIndex.value = key
}
</script>



